<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="30">
          <template>
            <a-col :md="4" :sm="6">
              <a-form-item label="设备名称">
                <a-input
                  placeholder="请输入设备名称查询"
                  v-model="queryParam.name"
                ></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="6">
              <a-form-item label="按域筛选:">
                <a-select placeholder="请选择域" v-model="queryParam.regionId">
                  <a-select-option
                    v-for="item in regionList"
                    :key="item.regionId"
                    :value="item.regionId"
                  >
                    {{ item.name }}（{{
                      item.state === "1"
                        ? "在线"
                        : item.state === "2"
                        ? "离线"
                        : "禁用"
                    }}）
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="6">
              <a-form-item label="设备型号:">
                <a-select
                  placeholder="请选择设备型号"
                  v-model="queryParam.modelId"
                >
                  <a-select-option
                    v-for="item in modelList"
                    :key="item.modelId"
                    :value="item.modelId"
                  >
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="6">
              <a-form-item label="是否在线:">
                <a-select
                  placeholder="请选择是否在线"
                  showSearch
                  showArrow
                  optionFilterProp="children"
                  :getPopupContainer="(node) => node.parentNode"
                  :defaultActiveFirstOption="false"
                  v-model="queryParam.online"
                >
                  <a-select-option value="1">是</a-select-option>
                  <a-select-option value="0">否</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </template>
          <a-col :md="4" :sm="6">
            <span
              style="float: left; overflow: hidden"
              class="table-page-search-submitButtons"
            >
              <a-button type="primary" @click="searchQuery" icon="search"
                >查询</a-button
              >
              <a-button
                type="primary"
                @click="resetParam"
                icon="reload"
                style="margin-left: 8px"
                >重置
              </a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="table-operator" style="border-top: 5px">
      <a-button @click="addDev" type="primary" icon="plus">添加设备</a-button>
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay" @click="handleMenuClick">
          <a-menu-item key="1">
            <a-icon type="setting" />
            <span>批量删除</span>
          </a-menu-item>
          <a-menu-item key="2">
            <a-icon type="setting" />
            <span>批量启用</span>
          </a-menu-item>
          <a-menu-item key="3">
            <a-icon type="setting" />
            <span>批量停用</span>
          </a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px">
          批量操作
          <a-icon type="down" />
        </a-button>
      </a-dropdown>
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px">
        <i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a
          style="font-weight: 600"
          >{{ selectedRowKeys.length }}</a
        >项&nbsp;&nbsp;
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>

      <a-table
        ref="table"
        bordered
        size="middle"
        rowKey="devId"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
        }"
        @change="handleTableChange"
      >
        <span slot="action2" slot-scope="text, record">
          <a @click="cameraList(record)">管理</a>
        </span>

        <span slot="action" slot-scope="text, record">
          <a @click="editDev(record)">编辑</a>
          <a-divider type="vertical" />
          <a href="javascript:;" @click="devDetail(record)">详情</a>
          <a-divider type="vertical" />
          <a-popconfirm
            title="确定此操作吗?"
            @confirm="() => changeStatus(record)"
          >
            <a>{{ record.used === "1" ? "停用" : "启用" }}</a>
          </a-popconfirm>
        </span>
      </a-table>
    </div>
    <!-- table区域-end -->
    <dev-add-modal ref="modalForm" @ok="modalFormOk"></dev-add-modal>
    <dev-edit-modal ref="deveditmodal" @ok="editModalOk"></dev-edit-modal>
  </a-card>
</template>

<script>
import DevAddModal from "./modules/DevAddModal";
import DevEditModal from "./modules/DevEditModal";
import { JeecgListMixin } from "@/mixins/JeecgListMixin";
import { getAction, postAction } from "@/api/manage";
export default {
  name: "DevList",
  mixins: [JeecgListMixin],
  components: {
    DevAddModal,
    DevEditModal,
  },
  data() {
    return {
      //   showed: false, //查看
      description: "这是设备管理页面",
      queryParam: {
        name: undefined,
        regionId: undefined,
        modelId: undefined,
        online: undefined,
      },
      modelList: [],
      regionList: [],
      columns: [
        {
          title: "设备名称",
          align: "center",
          dataIndex: "name",
          width: 60,
        },
        // {
        // 	title: '设备编号',
        // 	align: "center",
        // 	dataIndex: 'devCode',
        // 	width: 100
        // },
        {
          title: "型号",
          align: "center",
          dataIndex: "modelName",
          width: 50,
        },
        {
          title: "设备类型",
          align: "center",
          width: 60,
          dataIndex: "typeDesc",
        },
        {
          title: "编码通道数",
          align: "center",
          width: 60,
          dataIndex: "encodeChannelNum",
        },
        {
          title: "设备地点",
          align: "center",
          width: 60,
          dataIndex: "location",
        },
        {
          title: "IP地址",
          align: "center",
          width: 60,
          dataIndex: "ip",
        },
        {
          title: "状态",
          align: "center",
          width: 60,
          dataIndex: "state",
          customRender: function (text) {
            if (text === "1") {
              return "在线";
            } else if (text === "2") {
              return "离线";
            } else if (text === "3") {
              return "禁用";
            }
          },
        },
        {
          title: "管理摄像机",
          dataIndex: "action2",
          scopedSlots: {
            customRender: "action2",
          },
          align: "center",
          width: 80,
        },
        {
          title: "设备描述",
          align: "center",
          width: 60,
          dataIndex: "devDesc",
        },
        {
          title: "操作",
          dataIndex: "action",
          scopedSlots: {
            customRender: "action",
          },
          align: "center",
          width: 80,
        },
      ],
      url: {
        list: "/dev/page",
        delete: "/dev/delete",
        deleteBatch: "/dev/delete-batch",
        usedBatch: "/dev/setDevUseds",
      },
    };
  },
  created() {
    //初始化数据，获取类型
    getAction("/dev/model/list").then((res) => {
      if (res.code == "00000") {
        this.modelList = res.data;
      } else {
        this.$message.warning("获取型号错误");
        // this.close(this.modelList);
      }
    });
    //初始化数据，获取域
    getAction("/dev/getregions").then((res) => {
      if (res.code == "00000") {
        this.regionList = res.data;
      } else {
        this.$message.warning("获取型号错误");
      }
    });
  },
  methods: {
    addDev: function () {
      //初始化数据，获取类型
      // this.$refs.modalForm.typeList = [{"typeId":"c79881a1a5c24b40bdc4fc17016719c5", "typeDesc":"IPC"}];
      getAction("/dev/type/list").then((res) => {
        if (res.code == "00000") {
          this.$refs.modalForm.typeList = res.data;
        } else {
          this.$message.warning("获取类型错误");
        }
      });
      this.$refs.modalForm.show();
      this.$refs.modalForm.disableSubmit = false;
    },
    modalFormOk() {
      // 新增/修改 成功时，重载列表
      this.loadData();
    },
	//编辑
    editDev: function (record) {
      this.$refs.deveditmodal.show(record);
      this.$refs.deveditmodal.title = "编辑";
      this.$refs.deveditmodal.disableSubmit = false;
    },
    editModalOk() {
      // 修改 成功时，重载列表
      this.loadData();
    },
    // 详情
    devDetail: function (record) {
      this.$refs.deveditmodal.show(record);
      this.$refs.deveditmodal.title = "详情";
      this.$refs.deveditmodal.disableSubmit = true;
    },

    handleMenuClick(e) {
      if (e.key == 1) {
        this.batchDel();
      } else if (e.key == 2) {
        this.batchOpt(this.url.usedBatch, "1");
      } else if (e.key == 3) {
        this.batchOpt(this.url.usedBatch, "0");
      }
    },
    changeStatus(record) {
      let objTemp = {};
      objTemp.used = record.used == 0 ? 1 : 0;
      objTemp.devId = record.devId;
      postAction("/dev/set-used", objTemp).then((res) => {
        if (res.code == "00000") {
          this.$message.success("修改成功");
          this.loadData();
        } else {
          this.$message.warning("修改失败:" + res.msg);
        }
      });
    },
    resetParam() {
      this.queryParam = {};
      this.queryParam.userType = undefined;
      this.loadData(1);
    },
    //路由跳转，打开新的tab
    cameraList(record) {
      console.log(record);
      console.log(JSON.stringify(record.devId));
      //关闭tab
      // this.$parent.closeRouteViewTab('dev/camera')

      //跳转新tab
      this.$router.push({
        name: "/dev/camera",
        params: {
          devId: record.devId,
        },
      });
      // this.routerRefresh();//调用app.vue里面的routerRefresh()方法，完成摧毁和重建过程
    },
  },
};
</script>
<style scoped>
@import "~@assets/less/common.less";
</style>
